<template>
  <form-box headText="加工费明细">
    <el-button size="small" @click.native="addProcess" slot="btn">增加加工费明细</el-button>
    <el-table :data="req_process.process_list"
              border fit highlight-current-row show-summary style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column align="center" label="id" max-width="20%">
        <template scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="项目" max-width="20%">
        <template scope="scope">
          <span v-show="!scope.row.isEdit">{{scope.row.process_name}}</span>
          <!--<el-input v-show="scope.row.isEdit" v-model="scope.row.process_name"></el-input>-->
          <el-select
            v-show="scope.row.isEdit"
            v-model="scope.row.process_name"
            placeholder="项目"
            :visible-change="vlChange(scope.$index)"
            @change="selectProcessNameChange">
            <el-option
              v-for="item in options_search_processName"
              :key="item.process_code"
              :label="item.process_name"
              :value="item.process_code">
              <span style="float: left">{{ item.process_name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.process_ratio }}/{{item.process_unit_name}}</span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="加工数量/工时" prop="t" max-width="20%">
        <template scope="scope">
          <span v-show="!scope.row.isEdit">{{scope.row.process_count}}</span>
          <el-input v-show="scope.row.isEdit" @change="countChange(scope.$index)" v-model="scope.row.process_count"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单位" max-width="20%">
        <template scope="scope">
          <span>{{scope.row.process_unit_name}}</span><!-- process_unit -->
        </template>
      </el-table-column>
      <el-table-column align="center" label="加工费率" max-width="20%">
        <template scope="scope">
          <span>{{scope.row.process_ratio}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="加工费" max-width="20%">
        <template scope="scope">
          <span>{{scope.row.process_cost}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" max-width="20%">
        <template scope="scope">
          <el-button :type="scope.row.isEdit?'success':'primary'"
                     size="small"
                     @click.native='scope.row.isEdit=!scope.row.isEdit'
                     icon="edit">{{scope.row.isEdit?'完成':'编辑'}}</el-button>
          <el-button
            size="small"
            type="danger"
            @click="delProcess(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </form-box>
</template>
<script>
  import formBox from '../../../../components/formBox.vue'
  import {
    processCostItemList,
    delProcessItem
  } from '@/api/cstOrder/compute'

  export default {
    name:'createComputeProcess',
    components:{
      formBox
    },
    data(){
      return {
        processSearchLoading:false,
        serachProcessNameReqData:{
          client_type:1,
        },
        options_search_processName:[],
        curIndex:null
      }
    },
    props:[
      'req_process'
    ],
    methods:{
      remoteMethod_processName(query){  //定单头信息 公司客户搜索 方法
        this.processSearchLoading = true;
        processCostItemList(this.serachProcessNameReqData)
          .then(res => {
              this.processSearchLoading = false;
              this.options_search_processName = res.process_item_list
          })
          .catch(err => {
            this.$message.error('查询失败!');
            console.log(err);
          })
      },
      selectProcessNameChange(val){ //项目 搜索选框的change事件方法
        if(val){
          for(let i of this.options_search_processName){
            if(i.process_code == val){
              this.req_process.process_list[this.curIndex].process_code = i.process_code
              this.req_process.process_list[this.curIndex].process_name = i.process_name
              this.req_process.process_list[this.curIndex].process_ratio = i.process_ratio
              this.req_process.process_list[this.curIndex].process_unit = i.process_unit
              this.req_process.process_list[this.curIndex].process_unit_name = i.process_unit_name
            }
          }
        }
      },
      vlChange(index){
        this.curIndex = index
      },
      addProcess(){
        let process = {
          isEdit:true,
          process_ratio:'',
          id:'',
          process_cost:'',
          process_count:'',
          process_name:'',
          process_code:'',
          process_unit:'',
          process_unit_name:''
        }
        this.req_process.process_list.push(process)
      },
      countChange(index){
        this.req_process.process_list[index].process_cost = parseFloat(this.req_process.process_list[index].process_count) *
          parseFloat(this.req_process.process_list[index].process_ratio)
      },
      delProcess(index){
        this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.req_process.process_list[index].id){
            delProcessItem()
              .then(res => {
                this.req_process.process_list.splice(index,1)
                this.$message({
                  type:'success',
                  message:'删除成功!'
                })
              })
              .catch(err => {
                console.log(err)
                this.$message.error('删除失败!')
              })
          }else{
            this.req_process.process_list.splice(index,1)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
    mounted(){
      this.remoteMethod_processName()
    }
  }
</script>
<style scoped lang="scss">
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
</style>
